<template>
  <div id="data-view">
    <dv-full-screen-container>
      <div class="main-header">
        <div class="mh-left"><dv-decoration-1/></div>
        <div class="mh-middle"><dv-decoration-5/>疫情大数据平台</div>
        <div class="mh-right"><dv-decoration-3/></div>
      </div>
      <dv-border-box-1>
        <div class="main-container">
            <dv-border-box-3 class="left-container">
              <TotalDataTopTableComponent :areaTopData="areaTopData"></TotalDataTopTableComponent>
            </dv-border-box-3>
            <div class="right-container">
                <div class="top-container">
                    <div class="map-container">
                      <dv-border-box-8>
                        <MapComponent class="flex-center" :curAddress="curAddress"></MapComponent>
                        <div class="flex-center">
                          <div class="center">新增确诊<dv-digital-flop :key="time" :config="todayConfirm"/></div>
                          <div class="center">新增死亡<dv-digital-flop :key="time" :config="todayDead"/></div>
                          <div class="center">新增治愈<dv-digital-flop :key="time" :config="todayHeal"/></div>
                          <div class="center">累计确诊<dv-digital-flop :key="time" :config="totalConfirm"/></div>
                          <div class="center">累计死亡<dv-digital-flop :key="time" :config="totalDead"/></div>
                          <div class="center">累计治愈<dv-digital-flop :key="time" :config="totalHeal"/></div>
                          <div class="center">现存确诊<dv-digital-flop :key="time" :config="currConfirm"/></div>
                        </div>
                      </dv-border-box-8></div>
                    <div class="right-chart-container">
                        <dv-border-box-4 class="right-chart-node-1">
                          <CurrDataTopPillarComponent :areaTopData="areaTopDataOrderByCurr"></CurrDataTopPillarComponent>
                        </dv-border-box-4>
                        <dv-border-box-4 class="right-chart-node-2">
                          <TodayDataTopTableComponent :areaTopData="areaTopData"></TodayDataTopTableComponent>
                        </dv-border-box-4>
                    </div>
                </div>
                <div class="bottom-container">
                    <dv-border-box-9 class="bottom-chart-node">
                      <TotalLinerComponent :logAreaData="logAreaData" style="padding: 10px"></TotalLinerComponent>
                    </dv-border-box-9>
                    <dv-border-box-9 class="bottom-chart-node">
                      <TodayLinerComponent :logAreaData="logAreaData" style="padding: 10px"></TodayLinerComponent>
                    </dv-border-box-9>

                </div>
            </div>
        </div>
      </dv-border-box-1>

    </dv-full-screen-container>
  </div>
</template>

<script>
/* eslint-disable */
// @ is an alias to /src
import MapComponent from '@/components/MapComponent.vue'
import TotalLinerComponent from "@/components/TotalLinerComponent"
import TodayLinerComponent from "@/components/TodayLinerComponent"
import TotalDataTopTableComponent from "@/components/TotalDataTopTableComponent"
import TodayDataTopTableComponent from "@/components/TodayDataTopTableComponent"
import CurrDataTopPillarComponent from "@/components/CurrDataTopPillarComponent"
import formatterThousands from '@/utils/stringUtils'
import { getMapInfo,getLogArea,getMapDataTop20,getMapDataOrderByCurrTop20 } from '@/api/covid19Api'

export default {
  name: 'mainView',
  data() {
    return {
      time: '',
      curAddress: this.$mapConf,
      // 由于datav的数组翻牌组件未设置深度监听 所以需要一个缓存配置
      mapInfoTmp: {
        number: [0],
        content: '{nt}',
        formatter: formatterThousands
      },
      todayConfirm: {
        number: [0],
        content: '{nt}',
        formatter: formatterThousands
      },
      todayDead: {
        number: [0],
        content: '{nt}',
        formatter: formatterThousands
      },
      todayHeal: {
        number: [0],
        content: '{nt}',
        formatter: formatterThousands
      },
      totalConfirm: {
        number: [0],
        content: '{nt}',
        formatter: formatterThousands
      },
      totalDead: {
        number: [0],
        content: '{nt}',
        formatter: formatterThousands
      },
      totalHeal: {
        number: [0],
        content: '{nt}',
        formatter: formatterThousands
      },
      currConfirm: {
        number: [0],
        content: '{nt}',
        formatter: formatterThousands
      },
      logAreaData: {
        type: Array,
        default: []
      },
      areaTopData: {
        type: Array,
        default: []
      },
      areaTopDataOrderByCurr: {
        type: Array,
        default: []
      }

    }
  },
  components: {
    MapComponent,
    TotalLinerComponent,
    TodayLinerComponent,
    TotalDataTopTableComponent,
    TodayDataTopTableComponent,
    CurrDataTopPillarComponent
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {

      this.initMapInfo()
      this.initLogArea()
      this.getMapDataTop()

    },
    initMapInfo() {
      let that = this
      getMapInfo({id: that.$mapConf?.id}).then(res => {
        let data = res.data
        // 由于datav 没有数组滚动组件没有深度监听所以先 缓存再赋值
        // 新增确诊
        that.mapInfoTmp.number = [data?.todayConfirm]
        that.todayConfirm =  {...that.mapInfoTmp}
        // 新增死亡
        that.mapInfoTmp.number = [data?.todayDead]
        that.todayDead =  {...that.mapInfoTmp}
        // 新增治愈
        that.mapInfoTmp.number = [data?.todayHeal]
        that.todayHeal =  {...that.mapInfoTmp}
        // 累计确诊
        that.mapInfoTmp.number = [data?.totalConfirm]
        that.totalConfirm =  {...that.mapInfoTmp}
        // 累计死亡
        that.mapInfoTmp.number = [data?.totalDead]
        that.totalDead =  {...that.mapInfoTmp}
        // 累计治愈
        that.mapInfoTmp.number = [data?.totalHeal]
        that.totalHeal =  {...that.mapInfoTmp}
        // 现存确诊
        that.mapInfoTmp.number = [data?.totalConfirm - data?.totalDead - data?.totalHeal]
        that.currConfirm =  {...that.mapInfoTmp}

      }).catch(err =>{
        console.log(err);
      })
    },
    initLogArea() {
      let that = this;
      getLogArea({addressName: that.$mapConf?.name}).then(res => {
        let data = res.data
        that.logAreaData = data
      }).catch(err => {
        console.log(err);
      });
    },
    getMapDataTop() {
      let that = this
      getMapDataTop20({id: that.$mapConf?.id}).then(res => {
        let data = res.data
        that.areaTopData = data
      }).catch(err => {
        console.log(err);
      })
      getMapDataOrderByCurrTop20({id: that.$mapConf?.id}).then(res => {
        let data = res.data
        that.areaTopDataOrderByCurr = data
      }).catch(err => {
        console.log(err);
      })
    }
  },

}
</script>

<style scoped lang="scss">
.title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.center {
  text-align: center;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  #dv-full-screen-container {
    background-image: url("@/assets/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);
      a:visited {
        color: rgb(1, 134, 187);
      }
    }
    .mh-middle {
      font-size: 30px;
    }
    .mh-left,
    .mh-right {
      width: 450px;
    }
  }
  .main-container {
    height: 100%;
    display: flex;
  }
  .left-container {
    width: 22%;
    padding: 10px;
    box-sizing: border-box;
    .border-box-content {
      flex-direction: column;
    }
  }
  .right-container {
      width: 77%;
      .top-container{
          display: flex;
          justify-content: space-between;
          height: 77%;
          .map-container{
              width: 71%;

          }
          .right-chart-container {
              width: 28%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .right-chart-node-1 {
                  height: 33%;
              }
              .right-chart-node-2 {
                height: 66%;
              }
          }
      }
      .bottom-container{
          display: flex;
          height: 22%;
          justify-content: space-between;
          .bottom-chart-node {
              width: 49.8%;
          }
      }
  }
  .top-chart-container {
      display: flex;
  }
}
</style>
